<template>
  <div>
    <LRheader :center="center"></LRheader>
    <div class="main">
      <van-form @submit="onSubmit" label-align="center">
        <van-field
          :value="userInfo.phone"
          name="phone"
          label="手机号"
          disabled
        />

        <van-field
          v-model="userInfo.mail"
          label="邮箱"
          name="mail"
          placeholder="请填写邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />

        <van-field name="gender" label="性别">
          <template #input>
            <van-radio-group v-model="userInfo.gender" direction="horizontal">
              <van-radio name="1">男 </van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          readonly
          clickable
          name="value"
          :value="userInfo.value"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>

        <van-field
          v-model="userInfo.password"
          type="password"
          label="修改密码"
          name="password"
          placeholder="请填写密码"
        />

        <div style="margin: 30px 140px">
          <van-button square block type="info" native-type="submit" color="#999"
            >保存</van-button
          >
        </div>
        <div style="margin: 20px 140px">
          <van-button
            square
            block
            type="info"
            native-type="buttom"
            color="#999"
            @click="shanchu()"
            >退出</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import LRheader from "../../components/Nav/LRheader";
import my from "../../config/modules/user";
import Vue from "vue";
import { Form, RadioGroup, Radio, Area, Field, Button, Popup,Toast} from "vant";
Vue.use(Toast);
Vue.use(Area);
Vue.use(Field);
Vue.use(Button);
Vue.use(Form);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Popup);
// 选择城市
const areaList = {
  province_list: {
    110000: "广东省",
    120000: "福建省",
  },
  city_list: {
    110100: "深圳市",
    110200: "广州市",

    120100: "厦门市",
    120200: "福州市",
  },
  county_list: {
    110101: "福田区",
    110102: "罗湖区",

    110201: "天河区",
    110202: "珠海区",

    120101: "岛",
    120102: "海",

    120201: "山",
    120202: "谷",

    // ....
  },
};
export default {
  data() {
    return {
      // 组件数据
      center: "个人信息",
      // 初始化个人信息对象
      userInfo: {},
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
    };
  },
  methods: {
    // 城市
    onConfirm(values) {
      this.userInfo.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },

    // 登录
    onSubmit(values) {
      console.log("submit", values);
      let _token = this.$store.state.my._token;
      if (_token) {
        this.$http.post(my.settingup, values).then((res) => {
          Toast.success(res.msg);
          this.$router.push('/user')
        });
      }

    },
    shanchu() {
      // localStorage.removeItem('_token');
      this.$store.commit("my/setToken", "");
      Toast.success("正在退出");
      setTimeout(() => {
      this.$router.push("/user");
          }, 1000);
    },
  },

  created() {
    // 进入该组件隐藏底部导航
    this.$store.commit("my/setIsShow", true);
    // console.log(this.$store.state.my.isShow)
    let _token = this.$store.state.my._token;
    if (_token) {
      // console.log(_token)
      this.$http.get(my.getUserInfo).then((ret) => {
        if (ret.err == 0) {
          // 赋值给初始可变数据
          this.userInfo = ret.data;
        }
      });
    }
  },
  //   组件注册
  components: {
    LRheader,
  },
};
</script>

<style scoped>
.main {
  margin-top: 20px !important;
}
.yangshi {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>